<template>
  <div class="custom-body" :style="borderStyle">
    <el-empty
      v-if="dataList === null || dataList.length === 0"
      class="custom-right"
      :image-size="100"
    />
    <div v-else class="custom-right">
      <div
        v-for="(item, index) in dataList"
        :key="'server-' + index"
        :style="liStyle"
        class="custom-right-li"
        @click="openEntity(item)"
      >
        <div class="custom-body custom-body-li" :style="borderStyle">
          <div class="custom-li-right">
            <div class="custom-li-title" :style="borderStyle">
              {{ item[column["title"]] }}
            </div>
            <div class="custom-li-summary" :style="borderStyle">
              {{ "简介：" + item[column["jj"]] }}
            </div>
            <div class="custom-li-image">
              <el-image
                lazy
                class="custom-image"
                :src="item[column['image']]"
              />
            </div>
          </div>
          <div class="custom-li-top" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { template, openEntity } from '@/mixins/template';
export default {
  // 一事联办
  name: 'PcImageListTempV1',
  mixins: [template, openEntity],
  props: {
    temp: {
      type: Object,
      default() {
        return {};
      }
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      borderStyle: {},
      customStyle: {}
    };
  },

  computed: {
    themes() {
      return this.$store.getters.theme;
    },
    liStyle() {
      const width = (100 / this.column.row).toFixed(2);
      const height = (
        100 / Math.ceil(this.column.size / this.column.row)
      ).toFixed(2);
      return { width: width + '%', height: height + '%' };
    }
  },
  watch: {
    layout: {
      handler(newData, oldData) {
        this.customStyle = newData;
        this.titleStyle = {
          backgroundColor: newData.mrlb,
          opacity: newData.tmd
        };
        this.titleFont = { color: newData.lmys };
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    temp: {
      handler(newData, oldData) {
        if (this.showHeader) {
          const pzx = JSON.parse(newData.data.pzx);
          this.column = pzx;
          this.cid = newData.data.id;
          this.setting = pzx;
          this.initData();
        } else {
          const pzx = JSON.parse(newData.pzx);
          this.column = pzx;
          this.cid = newData.id;
          this.setting = pzx;
          this.initData();
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    themes: {
      handler(val, oldVal) {
        this.$nextTick(() => {
          console.log(val);
          this.borderStyle.borderRadius = val.bkdx;
          // if (this.temp.sfxsbk === true) {
          //   this.borderStyle.border = "1px solid " + val.bkys;
          // }
          // if (this.temp.bkyy === true) {
          //   this.borderStyle.boxShadow = "0 2px 4px rgba(0, 0, 0, .12)";
          // }
          this.borderStyle.background = val.columnGroundColor;
          this.borderStyle.color = val.fontColor;
          this.borderStyle = Object.assign({}, this.borderStyle);
        });
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  }
};
</script>

<style scoped>
.custom-body {
  width: 100%;
  height: 100%;
  position: relative;
}
.custom-right {
  display: flex;
  flex-flow: row nowrap;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin-left: -10px;
  margin-right: -10px;
}
.custom-right-li {
  flex: 0 1 auto;
  padding: 15px 10px;
  box-sizing: border-box;
}
.custom-body-li {
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  position: relative;
}
.custom-li-top {
  position: absolute;
  height: 4px;
  left: 0px;
  top: 0px;
  background-color: #00a0e9;
  transition: width 3s;
}
.custom-body-li:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.custom-body-li:hover .custom-li-top {
  width: 100%;
}
.custom-li-image {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
  left: 50%;
  margin-left: -50px;
  opacity: 0.1;
}
.custom-li-right {
  width: 100%;
  flex: 0 1 auto;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  position: relative;
}
.custom-image {
  width: 100%;
  height: 100%;
}
.custom-li-title {
  flex: 0 1 auto;
  height: 50%;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #212a39;
  text-align: center;
  padding: 0px 10px;
  box-sizing: border-box;
}
.custom-li-summary {
  flex: 0 1 auto;
  height: 50%;
  line-height: 20px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #a1a4bb;
  padding: 0px 10px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
